<template>
  <div>
    <el-form v-model="data.search" :inline="true">
      <el-form-item label="用户名">
        <el-input v-model="data.search.cosName" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <yu-table ref="yuTable" :tableData="data.tableData" :columns="data.tableData.columns">
      <template #toolbar>
        <el-button-group class="ml-4">
          <el-button @click="userAdd">新增</el-button>
          <el-button @click="delBatch">删除</el-button>
        </el-button-group>
      </template>
      <template v-slot:changeIstop="{ scopeData }">
        <el-switch
          v-model="scopeData.row.isStop"
          @change="changeIsStop($event, scopeData.row)"
          active-value="1"
          inactive-value="0"
          inactive-color="#13ce66"
          active-color="#ff4949">
        </el-switch>
      </template>
      <template v-slot:changeIsUse="{ scopeData }">
        <el-switch
          v-model="scopeData.row.isUse"
          @change="changeIsStop($event, scopeData.row)"
          active-value="1"
          inactive-value="0"
          inactive-color="#13ce66"
          active-color="#ff4949">
        </el-switch>
      </template>
      <template v-slot:handleSlot="{ scopeData }">
        <el-button text type="success" size="small" @click="cosUserEdit(scopeData.row, scopeData.row.rowIndex - 1)">编辑 </el-button>
        <el-button text size="small" type="danger" @click="cosUserDel(scopeData.row, scopeData.row.rowIndex - 1)">删除 </el-button>
      </template>
    </yu-table>
    <yu-dialog :data="data.dialogConfig" v-model:isShow="data.isShow">
      <edit-user :editData="data.editData" v-model:isShow="data.isShow" @search="search" />
    </yu-dialog>
  </div>
</template>

<script setup>
  import { reactive, ref, getCurrentInstance, onBeforeMount } from 'vue';
  import EditUser from './EditUser.vue';
  const { proxy } = getCurrentInstance();
  const data = reactive({
    search: { cosName: '' },
    tableData: { data: [], columns: [], tableArrts: {} },
    editData: {},
    dialogConfig: {},
    isShow: false,
  });

  data.tableData.columns = [
    { type: 'selection' },
    { title: '用户名', key: 'userCode', width: 120, tooltip: true },
    { title: '姓名', key: 'userName', align: 'center' },
    { title: '手机号', key: 'userPhone', tooltip: true },
    { title: '邮箱', key: 'userEmail', tooltip: true },
    {
      title: '是否停用',
      key: 'isStop',
      align: 'center',
      width: 100,
      slot: 'changeIstop',
    },
    { title: '是否禁用', key: 'isUse', slot: 'changeIsUse', tooltip: true },
    { title: '操作', slot: 'handleSlot', width: 180 },
  ];
  data.tableData.data = [
    {
      userCode: '001',
      userName: '张三',
      userPhone: '12345678912',
      userEmail: '123@163.com',
      usedrPassword: '123456',
      isStop: '0',
      isUse: '1',
      handleSlot: '',
    },
  ];

  onBeforeMount(() => {
    //初始化查询
    search();
  });
  const search = async () => {
    proxy.$api.user.queryCosUser(data.search).then(res => {
      data.tableData.data = res; //更新数据
    });
  };
  const select = (selection, row) => {
    console.log(selection, row);
  };
  const selectAll = selection => {
    console.log(selection);
  };
  const userEdit = row => {
    userInfo.value.isShow = true;
  };
  const userAdd = () => {
    data.dialogConfig.title = '新增';
    data.isShow = true;
    data.editData = {};
  };
  0;
  //修改是否停用
  const changeIsStop = (isStop, row) => {
    console.log(isStop, row);
  };
  //修改是否停用
  const changeIsUse = (isUse, row) => {
    console.log(isUse, row);
  };
  //修改用户
  const cosUserEdit = (row, index) => {
    console.log(row, index);
    data.dialogConfig.title = '修改';
    data.isShow = true;
    data.editData = row;
  };
  //单条删除
  const cosUserDel = (row, index) => {
    proxy
      .$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        let data = [];
        data.push(row);
        proxy.$api.user.delSysUser(data).then(res => {
          if (res.code != -1) {
            proxy.$message({
              type: 'success',
              message: res.msg,
            });
          } else {
            proxy.$message({
              type: 'error',
              message: res.msg,
            });
          }
        });
        yuTable.value.deleteRow(row);
      });
  };

  //批量删除
  const delBatch = async () => {
    let selectRows = yuTable.value.selectRows;
    if (selectRows.length > 0) {
      proxy
        .$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          proxy.$api.user.delSysUser(selectRows).then(res => {
            if (res.code != -1) {
              proxy.$message({
                type: 'success',
                message: res.msg,
              });
              yuTable.value.deleteRows();
            } else {
              proxy.$message({
                type: 'error',
                message: res.msg,
              });
            }
          });
        });
    } else {
      proxy.$message({
        type: 'error',
        message: '请选择删除数据',
      });
    }
  };
</script>
<style lang="scss" scoped></style>
